html {
  font: normal 14px/1.5 'PingFangSC-regular', 'Tahoma', 'Lucida Grande', 'Verdana', 'Microsoft Yahei', 'STXihei', 'hei';
  color: #2b2b2b;
}
body {
  overflow-x: hidden;
  max-width: 300px;
  min-width: 320px;
  background: #f4f4f4;
  margin: 0 auto;
}

.hand {
  background-color: #ffc0cb;
  width: 300px;
  height: 40px;
}
.hand a {
  margin-left: 10px;
  margin-bottom: 40px;
}
.hand em {
  margin-left: 100px;
  font-size: 18px;
}
.hand img {
  margin-left: 90px;
  width: 20px;
  height: 20px;
}
.div2 {
  width: 300px;
  height: 50px;
  background-color: #1dd0a7;
}

.div2 a {
  margin-left: 48px;
  font-size: 15px;
}
.product {
  width: 300px;
  height: 60px;
  background-color: #fff;
  transition: transform 0.3s linear;
  
}
.product:hover {
  box-shadow: 5px 5px 5px #acaaaa;
}

.product .title {
  margin: 0 auto;
}

.product .desc {
  font-size: 12px;
  color: #ccc;
  text-overflow: ellipsis;
}
.product .price {
  font-size: 15px;
  color: #ff6a00;
  justify-content:space-between;
}
.product.distance{
  margin-left: 100px;
}
footer .footerbar {
  display: flex;
  background-color: #fff;
}
footer .footerbar li {
  flex: 1;
}
footer .footerbar a {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0.3571rem 0;
  color: #a5a5a5;
}
footer .footerbar a img {
  font-size: 2.1429rem;
  width: 30px;
  height: 30px;
}
footer .footerbar a span {
  margin-top: -0.5714rem;
}
footer .footerbar a.active {
  color: #ff6a00
  font-weight: bolder;
}
@media screen and (min-width: 480px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 400px) and (max-width: 480px) {
  html {
    font-size: 12px;
  }
  .container .show .down li {
    flex: 100%;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 10px;
  }
  .container article .show .down li {
    flex: 100%;
  }
}
